<template>
  <Header />
  <div class="content-area">
    <div class="types" v-if="$route.path == '/'">
      <div
        v-for="(item, index) in typeList"
        :class="{ active: useUserStore().currentType == item.id }"
        @click="useUserStore().currentType = item.id"
      >
        {{ item.name }}
      </div>
    </div>
    <main class="content-router-view">
      <router-view />
      <div class="users" v-if="$route.path == '/'">
        <div class="write" @click="$router.push('/article/edit')">写文章</div>
        <div class="message" @click="$router.push('/notice/message')">
          我的私信
        </div>
        <div style="margin-top: 30px; font-size: 28px; font-weight: 700">
          推荐文章
        </div>
        <div v-for="item in list">
          <Line />
          <div class="recommend">
            <div
              class="recommend-title"
              @click="$router.push('/article/detail/' + item.id)"
            >
              {{ item.title }}
            </div>
            <div>
              <img :src="like" class="icon" style="width: 20px; height: 20px" />
              {{ item.likeCount }}
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>
<script setup>
import { ref } from "vue";

import UserListItem from "@/components/UserListItem.vue";
import { ElMessage } from "element-plus";
import Enums from "@/utils/Enums";
import Header from "@/components/Header.vue";
import Line from "@/components/Line.vue";
// 获取推荐文章（点赞前5）
import { getRecommendArticleList } from "@/api/article";
import like from "@/assets/like.png";
import { getTypeList } from "@/api/types";
import { useUserStore } from "@/stores/userStore";
const list = ref([]);
const typeList = ref([
  {
    id: undefined,
    name: "全部",
  },
]);
getRecommendArticleList({
  status: Enums.ARTICLE_ENUMS.已发布,
}).then((res) => {
  // res.data.data
  list.value = res.data.data.records;
});
getTypeList().then((res) => {
  typeList.value = [...typeList.value, ...res.data.data];
});
</script>
<style scoped lang="less">
.content-router-view {
  width: 70%;
  margin: 20px auto;
  margin-top: 20px;
  display: flex;
  align-items: flex-start;
  gap: 20px;

  .users {
    width: 30%;
    // border: 1px solid #eee;
    background-color: #fff;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 5px;
    .title {
      color: #969696;
      margin-bottom: 20px;
    }
  }
  .recommend {
    display: flex;
    font-size: 22px;
  }
  .recommend-title {
    margin-right: auto;
  }
  .write {
    padding: 8px 30px;
    color: #fff;
    background-color: #ec6149;
    border-radius: 10px;
    display: flex;
    align-items: center;
    line-height: 30px;
    justify-content: center;
    user-select: none;
    cursor: pointer;
    margin-bottom: 10px;
  }
  .message {
    .write;
    background-color: #24774e;
  }
}
.content-area {
  height: calc(100vh - 80px);
  overflow-y: auto;
}
.types {
  width: 100%;
  height: 50px;
  display: flex;
  box-sizing: border-box;
  overflow-x: auto;
  align-items: center;
  background-color: #fff;
  padding: 0 20px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  div {
    cursor: pointer;
    user-select: none;

    display: flex;
    align-items: center;
    transition: all 0.5s;
    margin-right: 20px;
    border-radius: 20px;
    background-color: #f2f2f2;
    color: #000;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;

    &:hover {
      background: #d4d4d4;
    }
  }
  .active {
    background: #000000;
    color: #fff;
  }
}
</style>
